<template>
  <div class="rule-item">
    <el-dialog
      v-if="ruleItemVisible"
      title="查看信息"
      :visible.sync="ruleItemVisible"
      width="622px"
      append-to-body
      :close-on-click-modal="false"
      >
      <el-table :data="data" border fit style="width: 100%" header-cell-class-name="table-header-cell">
        <el-table-column label="规则名称" align="center" prop="name" />
        <el-table-column label="规则类型" align="center" prop="type" />
        <el-table-column label="优先级" align="center" prop="priority" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleView(scope)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer"></span>
    </el-dialog>
    <SubjectModal v-if="subjectModalVisible" :visible.sync="subjectModalVisible" :data="tableData"/>
    <KeywordModal v-if="KeywordModalVisible" :visible.sync="KeywordModalVisible" :data="tableData"/>
    <KeywordModal1  v-if="Keyword1ModalVisible" :visible.sync="Keyword1ModalVisible" :data="tableData"/>
  </div>
</template>
<script>
import SubjectModal from '@/views/maintenance/pages/warning-rule/components/rule-group/components/rule-item/components/subject-modal.vue'
import KeywordModal from '@/views/maintenance/pages/warning-rule/components/rule-group/components/rule-item/components/keyword-modal.vue'
import KeywordModal1 from '@/views/maintenance/pages/warning-rule/components/rule-group/components/rule-item/components/keyword-modal-1.vue'

export default {
  name: 'RuleItem',
  components: {
    SubjectModal,
    KeywordModal,
    KeywordModal1
  },
  props: {
    data: Array,
    visible: Boolean
  },
  data() {
    return {
      subjectModalVisible: false,
      KeywordModalVisible: false,
      Keyword1ModalVisible: false,
    }
  },
  computed: {
    ruleItemVisible: {
      get(){
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
    tableData(){
      console.log(1111111111)
      if(this.KeywordModalVisible) {
        return this.data[0].keywordData
      }
      if(this.Keyword1ModalVisible) {
        return this.data[2].keyword1Data
      }
      if(this.subjectModalVisible) {
        return this.data[1].subjectData
      }
      return []
    }
  },
  methods: {
    handleView(val) {
      if(val.$index === 0) {
        this.KeywordModalVisible = true
      } else if(val.$index === 1){
        this.subjectModalVisible = true
      } else if(val.$index === 2){
        this.Keyword1ModalVisible = true
      }
    }
  }
}
</script>
